<template>
  <div class="box">
    <label class="item-box" v-for="(item, key) in list" :key="key">
      <div class="flex item">{{item}}<input class="check iconfont icon-xuanze-duoxuan-tianchong" type="checkbox" :value="value[key]" name="alarm" v-model="checked"></div>
    </label>
  </div>
</template>

<script>
export default {
  name: 'Alarm',
  data () {
    return {
      list: ['事故动作', '遥信变位', '事件顺序记录', '遥控操作', '遥调操作', '微机保护',
        '用户操作', '厂站工况', '通道工况', '遥测越限', 'SCADA事件', '保护故障信息'],
      value: ['1320000000', '1320000001', '1320000002', '1320000004', '1320000005', '1320000010',
        '1320000020', '1320000017', '1320000013', '1320000003', '1320000033', '1320000038'],
      checked: ['1320000000'],
      isLoaded: false
    }
  },
  methods: {
    init () {
      this.newProjectDwr.getUserAlarmTypeSetting(localStorage.userId, res => {
        this.checked = res.split(',')
      })
    }
  },
  created () {
    this.init()
  },
  watch: {
    checked (val) {
      if (!this.isLoaded) {
        this.isLoaded = true
        return
      }
      var str = val.join(',')
      this.newProjectDwr.saveUserAlarmTypeSetting(localStorage.userId, str)
    }
  }
}
</script>

<style scoped>
  .check:checked:before{
    content: "\e660";
    color: #FF9900;
  }
  .check:before{
    transition: content .4s;
  }
  .check{
    -webkit-appearance: none;
    outline: 0;
  }
.item-box{
    padding-left: 13px;
    background: #fff;
    display: block;
  }
.item-box:last-child{
  border-bottom: 1px solid #eee;
}
  .item{
    padding-right: 13px;
    justify-content: space-between;
    font-size: 17px;
    height: 45px;
    border-bottom: 1px solid #eee;
  }
  .item-box:last-child>.item{
  border-bottom: none;
}
</style>
